<template>
  <view class="info-main" :style="{ paddingTop: paddingTop + 'px' }">
    <view class="info-box">
      <view class="user-img-box">
        <image :src="avatarFullUrl" :key="avatarKey" class="user-img" mode="scaleToFill" />
        <button open-type="chooseAvatar" class="user-img-update-logo" @chooseavatar="ChooseAvatar">
          <img src="@/static/icon/update_default.png" alt="" class="user-img-update-logo" />
        </button>
      </view>
      <view class="name-box">
        <view class="user-name" v-if="!isEditUserName" @click="isEditUserName = true">{{ memberStore.userinfo.username
          }}</view>
        <view class="user-name-edit" v-else>
          <input class="user-name user-name-input" type="nickname" v-model="memberStore.userinfo.username" />
        </view>
      </view>
    </view>
  </view>
  <view class="feature-box">
    <view class="feature-list-box">
      <view class="feature-box-item" @click="toUpdate">
        <img src="@/static/icon/tag.png" alt="" class="feature-box-item-img" />
        <view class="feature-box-item-title">我的信息</view>
        <view class="icons-right">
          <uni-icons type="right" size="20" color="#999"></uni-icons>
        </view>
      </view>
    </view>
    <view class="feature-list-box">
      <view class="feature-box-item" @click="testPhoto">
        <img src="@/static/icon/tag.png" alt="" class="feature-box-item-img" />
        <view class="feature-box-item-title">搭配方案</view>
        <view class="icons-right">
          <uni-icons type="right" size="20" color="#999"></uni-icons>
        </view>
      </view>
      <view class="feature-box-item" @click="toShowcase">
        <img src="@/static/icon/car.png" alt="" class="feature-box-item-img" />
        <view class="feature-box-item-title">售卖橱窗</view>
        <view class="icons-right">
          <uni-icons type="right" size="20" color="#999"></uni-icons>
        </view>
      </view>
    </view>
    <view class="feature-list-box">
      <view class="feature-box-item" @click="toFeedback">
        <img src="@/static/icon/edit.png" alt="" class="feature-box-item-img" />
        <view class="feature-box-item-title">我的反馈</view>
        <view class="icons-right">
          <uni-icons type="right" size="20" color="#999"></uni-icons>
        </view>
      </view>
      <view class="feature-box-item" @click="toHelp">
        <img src="@/static/icon/help.png" alt="" class="feature-box-item-img" />
        <view class="feature-box-item-title">常见问题</view>
        <view class="icons-right">
          <uni-icons type="right" size="20" color="#999"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { putUserUpdateAPI } from "@/api/user";
import { avatarUrlImg } from "@/api/config/http";
import { useMemberStore } from "@/stroes/modules/member";
import { onLoad } from "@dcloudio/uni-app";
import { computed, ref, watch } from "vue";
const { safeArea } = uni.getSystemInfoSync();
const paddingTop = ref(safeArea?.top);
const memberStore = useMemberStore();
const isEditUserName = ref(false);
const avatarKey = ref(Date.now());
console.log("avatarUrlImg", avatarUrlImg);

const toHelp = () => {
  uni.navigateTo({ url: "/pages/help/help" });
};
const toFeedback = () => {
  uni.navigateTo({ url: "/pages/feedback/feedback" });
};
const toUpdate = () => {
  uni.navigateTo({ url: "/pages/update/update" });
};
const toShowcase = () => {
  uni.navigateTo({
    url: "/pages/sellShowcase/sellShowcase",
  });
};
const testPhoto = () => {
  uni.navigateTo({ url: "/pagesMember/address/address" });
};

// 拼接完整 URL
const avatarFullUrl = computed(() =>
  memberStore.userinfo.avatar?.startsWith("http")
    ? memberStore.userinfo.avatar
    : avatarUrlImg + memberStore.userinfo.avatar
);

const ChooseAvatar = (e: any) => {
  const avatarPath = e.detail.avatarUrl; // wxfile:// 开头
  console.log("远程微信头像 URL", avatarPath);
  uni.uploadFile({
    url: "/user/upload/avatar",
    filePath: avatarPath,
    name: "file",
    method: "POST",
    success: (uploadRes) => {
      if (uploadRes.statusCode === 200) {
        const result = JSON.parse(uploadRes.data);
        if (result.code === "200") {
          const avatarUrlFromServer = result.data;
          memberStore.setuserinfo({
            ...memberStore.userinfo,
            avatar: avatarUrlFromServer,
          });
          avatarKey.value = Date.now();
          uni.showToast({ title: "修改成功", icon: "success" });
        } else {
          uni.showToast({ title: result.message || "上传失败", icon: "none" });
        }
      } else {
        uni.showToast({ title: "状态码异常", icon: "none" });
      }
    },
    fail: () => {
      uni.showToast({ title: "上传失败", icon: "none" });
    },
  });
};

const updataUserName = async (newName: string) => {
  const res: any = await putUserUpdateAPI({
    avatar: memberStore.userinfo.avatar,
    phone: memberStore.userinfo.phone,
    email: memberStore.userinfo.email,
    username: memberStore.userinfo.username,
  });
};
watch(
  () => memberStore.userinfo.username,
  (newName, oldName) => {
    if (newName !== oldName) {
      updataUserName(newName);
    }
  }
);
watch(
  () => memberStore.userinfo.avatar,
  (newName, oldName) => {
    if (newName !== oldName) {
      console.log("头像地址更新===>", newName);
    }
  }
);

onLoad(() => {
  // 页面加载时的逻辑
});
</script>

<style lang="scss" scoped>
page {
  // background-color: red;
}

// 为了确保样式生效，添加一个全局样式
:deep(uni-page-body) {
  // background-color: red;
}

.info-main {
  display: flex;
  justify-content: center;
  height: 400rpx;
  background-color: $uni-color-primary;

  .info-box {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .user-img-box {
      position: relative;

      .user-img {
        background-color: #fff;
        width: 200rpx;
        height: 200rpx;
        overflow: hidden;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
      }

      .user-img-update-logo {
        width: 54rpx;
        height: 54rpx;
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: transparent;
      }
    }

    .name-box {
      margin-top: 40rpx;
      height: 60rpx;

      .user-name {
        overflow: hidden;
        text-align: center;
        color: #000000;
        font-size: 36rpx;
      }

      .user-name-edit {
        align-items: center;
        justify-content: space-between;
        overflow: hidden;

        .user-name-input {
          // border: 1px solid #000000;
        }
      }
    }
  }
}

.feature-box {
  padding-top: 40rpx;

  .feature-list-box {
    margin-bottom: 10rpx;
    padding: 0 48rpx;

    .feature-box-item {
      display: flex;
      align-items: center;
      height: 112rpx;
      background-color: #fff;

      .feature-box-item-img {
        width: 28rpx;
        height: 28rpx;
      }

      .feature-box-item-title {
        font-size: 36rpx;
        color: #000000;
        font-weight: 400;
        margin-left: 38rpx;
      }

      .feature-box-item-title:active {
        color: #92beab;
      }
    }

    .feature-box-item:active {
      background-color: rgba(117, 117, 117, 0.25);
    }
  }
}

.icons-right {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  height: 100%;
}
</style>
